<template>
  <div class="app">
    <header-title>选择城市</header-title>
    <!-- <div class="search">
      <input type="text" v-model="value" placeholder="请输入城市" />
    </div> -->
    <div class="hot-city">
      <p>
        <span>热门城市</span>
      </p>
      <ul>
        <li 
        v-for="(item,index) in hotCity" 
        :key="item.code" 
        :id="item.code" 
        :class="`hotCity${index}`" 
        @click="chooseHotCity(index)"
        >
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="city-list" v-for="item in cityArr" :key="item.firstKey">
      <div class="list-header">
        <span>{{item.firstKey}}</span>
      </div>
      <div class="list">
        <ul>
          <li 
          v-for="items in item.value" 
          :key="items.code"
          :class="`city${items.code}`"
          :id="items.code"
          @click="chooseCity(items.code)"
          >
            <span>{{items.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTitle from "../components/HeaderTitle.vue";
export default {
  name: "City",
  data() {
    return {
      hotCity: "",
      initial: "",
      value:'',
      id:'',
      name: '',
      cityArr: [],
    };
  },
  components: {
    HeaderTitle
  },
  methods: {
    initHot() {
      let arr = []
      let arr2 = []
      let arr3 = []
      let arr4 = []
      let arr5 = []
      let obj ={}
      fetch("https://apis.netstart.cn/driver/city-area.json")
        .then(response => response.json())
        .then(data => {
          this.hotCity = data.hot;
          this.initial = data.initial;
            // console.log(data.initial);
          // console.log(this.initial);
          this.initial.forEach(item => {
            arr.push(item[1])
          });

          arr.forEach(item =>{
            item.forEach(element =>{
              arr2.push(element)
            });
          });

          arr2 = JSON.parse(JSON.stringify(arr2))
          // console.log(arr2);
          arr2.forEach(item =>{
            arr3.push(item.citys)
          });

          arr3.forEach(item => {
            item.forEach(element =>{
              arr4.push(element)
            });
            
          });

          let group = arr4.reduce((pre, item) => {
              pre[item.pinyin.split("")[0].toUpperCase()] = [
                ...(pre[item.pinyin.split("")[0].toUpperCase()] || []),
                item
              ];
              return pre;
            }, {});
            // console.log(group);
  
            arr5 = Object.keys(group).map(key => {
              obj = {
                firstKey: key,
                value: group[key]
              };
              return obj;
            });
  
  
            function compare(property) {
              return function(object1, object2) {
                let value1 = object1[property];
                let value2 = object2[property];
  
                if (typeof value1 == typeof value2) {
                  if (typeof value1 === "number") {
                    return value1 - value2;
                  }
                  if (typeof value1 === "string") {
                    // 升序
                    return value1.toString().localeCompare(value2);
                  }
                }
              };
            }

          this.cityArr = arr5.sort(compare("firstKey"));
          this.cityArr = JSON.parse(JSON.stringify(this.cityArr))
          // console.log(this.cityArr);
         
        });
    },
    chooseHotCity(index) {
      let city = document.querySelector(`.hotCity${index}`).innerText
      let cityId = document.querySelector(`.hotCity${index}`).getAttribute("id")
      this.$router.push({path:'/test',query:{city:city+"市",id:cityId}})

    },
    chooseCity(code) {
      let city2 = document.querySelector(`.city${code}`).innerText
      let cityId2 = document.querySelector(`.city${code}`).getAttribute("id")

      this.$router.replace({path:'/test',query:{city:city2,id:cityId2}})
      console.log(cityId2);

    }
  },
  created() {
    this.initHot();
  }
};
</script>
<style lang="scss" scoped>
.app {
  width: 100%;
  // .search {
  //   width: 100%;
  //   height: 50px;
  //   // background-color: red;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   input {
  //     width: 90%;
  //     height: 30px;
  //     border: 0;
  //     outline: none;
  //     background-color: rgba(204, 204, 204, 0.3);
  //     padding-left: 10px;
  //   }
  // }
  .hot-city {
    width: 100%;
    // background-color: red;
    p {
      width: 100%;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
      background-color: rgba(204, 204, 204, 0.5);

      color: #666;
      span {
        padding-left: 15px;
      }
    }
    ul {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        flex-basis: 33.333%;
        height: 50px;
        // background-color: #ccc;
        text-align: center;
        line-height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
        span {
          padding: 10px 30px;
          background-color: #ccc;
        }
      }
    }
  }
  .city-list {
    width: 100%;
    .list-header {
      width: 100%;
      height: 30px;
      background-color: rgba(204, 204, 204, 0.5);
      line-height: 30px;
      span {
        padding-left: 15px;
        font-size: 22px;
        color: #666;
      }
    }
    .list {
      width: 100%;
      ul {
        width: 100%;
        li {
          width: 100%;
          height: 50px;
          // background-color: #666;
          font-size: 24px;
          line-height: 50px;
          color: #666;
          border-bottom: 1px solid #ccc;
          span {
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>